<template>
  <div class="dialog">
    <!-- 使用 slot 标签，站位，表示这里要放页面结构 -->
    <h3>
      <!-- 只要包含有除name以外的其他属性的插槽，叫做作用域插槽 -->
      <slot name="title" uname="zs" age="20">标题</slot>
    </h3>
    <div>
      <!-- 有name属性的插槽叫做具名插槽 -->
      <slot name="content">内容</slot>
    </div>
    <div>
      <!-- 没有给name属性的插槽，叫做默认插槽 -->
      <!-- 没有给出name属性，slot将使用default当做name值 -->
      <slot>按钮</slot>
    </div>
  </div>
</template>

<script>
export default {
}
</script>

<style>
.dialog {
  padding: 5px;
  margin: 10px;
  border: solid 2px black;
  border-radius: 5px;
  box-shadow: 5px 5px 2px 2px;
}
</style>